<template>
    <!--
    <div class="RightSide">
        <div class="Directory">

            <ul class="menu-list" style="padding-left: 20px">
                <li><h1>目录：</h1></li>
                <li v-for="(nav, index) in navList"
                    :key="index"
                    :class="{on: activeIndex === index}"
                    @click="currentClick(index)">

                    <strong>
                        <a href="javascript:;" @click="pageJump(nav)">
                            {{nav.title}}
                        </a>
                    </strong>

                    <div v-if="nav.children.length > 0 && activeIndex === index" class="menu-children-list">
                        <ul class="nav-list">
                            <li v-for="(item, idx) in nav.children"
                                :key="idx"
                                :class="{on: childrenActiveIndex === idx}"
                                @click.stop="childrenCurrentClick(idx)">

                                <a href="javascript:;" @click="pageJump(item)">
                                    {{item.title}}
                                 </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>

        </div>

        <div class="Information">
            <h1></h1>
            <el-avatar :src="author.avatar"></el-avatar>
            <span style="color: #1abc9c;font-family: Iceland">Written By：<span style="color: #3a8ee6;">{{author.nickname}}</span></span>
            <span style="color: #1abc9c;font-family: Iceland">Email-Address：<span style="color: #3a8ee6;">{{author.email}}</span></span>
            <h1></h1>
        </div>
    </div>
    -->
</template>

<!--

<script>
    import marked from 'marked'
    let rendererMD = new marked.Renderer();
    marked.setOptions({
        renderer: rendererMD,
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
    });



    export default {
        name:'RightSide',
        props: ["blogId","author"],
        data() {
            return {
                blog:{},
                mdContent:'',

                navList: [],
                activeIndex: 0,
                docsFirstLevels: [],
                docsSecondLevels: [],
                childrenActiveIndex: 0
            }
        },

        mounted() {
            this.getBlog();
            //console.log(this.navList)
        },

        methods: {
            async getBlog(){
                const {data: res} = (await this.$blog.get(`/details`,{
                    params:{
                        'id':this.blogId
                    }
                })).data
                this.blog = res.blog
                this.navList = this.handleNavTree(this.blog.content)
            },

            childrenCurrentClick(index) {
                this.childrenActiveIndex = index
            },

            pageJump(nav) {
                /*
                *   标题变 id 的规则：
                *   大写字母变小写, 串首空格被去掉 ,其他空格变'-', 点号'.'被去掉
                * */
                let target = ((nav.title).replace('.',''))
                target = '#'+target.substr(1,target.length)
                target = target.replace(' ','-')
                target = target.toLowerCase()
                target = target.replace('.','')
                //console.log(target)
                //let target =('#'+((nav.title).replace('.',''))).replace(' ','')
                $('html, body').animate({
                    scrollTop: $(target).offset().top
                }, 600);
            },

            currentClick(index) {
                this.activeIndex = index
            },

            getTitle(content) {
                let nav = [];
                let tempArr = [];
                content.replace(/(#+)[^#][^\n]*?(?:\n)/g, function(match, m1, m2) {
                    let title = match.replace('\n', '');
                    let level = m1.length;
                    tempArr.push({
                        title: title.replace(/^#+/, '').replace(/\([^)]*?\)/, ''),
                        level: level,
                        children: [],
                    });
                });
                // 只处理一级二级标题，以及添加与id对应的index值
                nav = tempArr.filter(item => item.level <= 2);
                let index = 0;
                return nav = nav.map(item => {
                    item.index = index++;
                    return item;
                });
            },

            // 将一级二级标题数据处理成树结构
            handleNavTree(blogContent) {
                let navs = this.getTitle(blogContent)
                let navLevel = [1, 2];
                let retNavs = [];
                let toAppendNavList;

                navLevel.forEach(level => {
                    // 遍历一级二级标题，将同一级的标题组成新数组
                    toAppendNavList = this.find(navs, {
                        level: level
                    });

                    if (retNavs.length === 0) {
                        // 处理一级标题
                        retNavs = retNavs.concat(toAppendNavList);
                    } else {
                        // 处理二级标题，并将二级标题添加到对应的父级标题的children中
                        toAppendNavList.forEach(item => {
                            item = Object.assign(item);
                            let parentNavIndex = this.getParentIndex(navs, item.index);
                            return this.appendToParentNav(retNavs, parentNavIndex, item);
                        });
                    }
                });
                return retNavs;
            },

            find(arr, condition) {
                return arr.filter(item => {
                    for (let key in condition) {
                        if (condition.hasOwnProperty(key) && condition[key] !== item[key]) {
                            return false;
                        }
                    }
                    return true;
                });
            },

            getParentIndex(nav, endIndex) {
                for (var i = endIndex - 1; i >= 0; i&#45;&#45;) {
                    if (nav[endIndex].level > nav[i].level) {
                        return nav[i].index;
                    }
                }
            },

            appendToParentNav(nav, parentIndex, newNav) {
                let index = this.findIndex(nav, {
                    index: parentIndex
                });
                nav[index].children = nav[index].children.concat(newNav);
            },

            findIndex(arr, condition) {
                let ret = -1;
                arr.forEach((item, index) => {
                    for (var key in condition) {
                        if (condition.hasOwnProperty(key) && condition[key] !== item[key]) {
                            return false;
                        }
                    }
                    ret = index;
                });
                return ret;
            },
        },
        computed: {
            content() {
                return this.mdContent
            },
            compiledMarkdown: function() {
                let index = 0;
                rendererMD.heading = function(text, level) {
                    if (level <= 2) {
                        return `<h${level} id="data-${index++}">${text}</h${level}>`;
                    } else {
                        return `<h${level}>${text}</h${level}>`;
                    }
                };
                rendererMD.code = function(code, language) {
                    code = code.replace(/\r\n/g,"<br>")
                    code = code.replace(/\n/g,"<br>");
                    return `<div class="text">${code}</div>`;
                };
                return marked(this.content);
            }
        }
    };

</script>


<style scoped>
    @import url('https://fonts.googleapis.com/css2?family=Iceland&display=swap');
    .RightSide{
        position: fixed;
        width: 20%;
        height: 570px;
        background-color: whitesmoke;
        border-radius: 10px;
        margin-left: 13px;
        margin-top: 30px;
        padding: 10px;
        opacity: 0.95;
    }

    .Directory{
        width: 100%;
        height: 63%;
        background-color: silver;
        border-radius: 10px;
        margin-bottom: 10px;
        overflow: auto;
    }

    .Information{
        width: 100%;
        height: 33%;
        background-color: silver;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @media screen and (max-width: 768px) {
        .RightSide{
            display: none;
        }
    }

    ul {
        list-style-type: none;
        padding: 2px 6px;
    }
    li {
        list-style-type: none;
        margin: 2px 6px;
    }
    a {
        color: #549add;
        font-family: Iceland;
        text-decoration: none;
        font-size: 18px;

    }
    a:hover{
        color: purple;
    }

</style>
-->
